<template>
	<view>
		<view class="nwrap getmain">
		  <view class="ntops ">
		    <!-- 选手编号：{{detail.playerNumber}}号     -->
			选手名字：{{detail.playerName}}
		    <!-- <text @click='online' id='id' wx:if="{{detail.playerType == 1}}">预约TA</text> -->
		  </view>
		  <view class="contents">我正在参加 {{detail.competitionName  || ''}}赛事的评选，快投我一票吧！</view>
		</view>
		<view >
		 <!-- <view class="tmenu">
		    <view v-for="(item,index) in tag"  bindtap="tag"  class='{{tar == idx?"active":""}}'>
		      {{item.name}}
		    </view>
		  </view> -->
		 
		    <view class="te" >
		      <view class="te-photo">
		        <swiper class="te-pho" indicator-dots="true" autoplay="false" duration="1000" indicator-color="#a7a7a7" indicator-active-color="#fe5ba9">
		          <block v-for="(item,index) in detail.img" :key='index'>
		            <swiper-item id="item.ids" bindtap="enters" class='swiper'>
		              <image :src="item"></image>
		            </swiper-item>
		          </block>
		        </swiper>
		      </view>
		      
		    </view>
		 
		 
		    <!-- 有作品时 -->
		    <!-- <view class="works">
		      <view class="work-vid">
		        <view class="work-video" wx:for="{{videos}}" bindtap='seevideo' id='{{item.id}}' data-src="{{item.fileOssPath}}">
		          <image src='{{item.coverOssPath}}'></image>
		          <view class="work-play">
		            <image src='../../images/art-play.png'></image>
		          </view>
		        </view>
		      </view>
		      <view class='zuo'>左滑查看更多</view>
		    </view> -->
		  
		</view>
		
		
		<view class="te-t getmain">
		 <!-- <view class="fenl">
		     <view>当前排名情况</view>
		     <view>所属分类:{{detail.programName}}</view>
		  </view> -->
		  <view class="te-top" style="position: relative;">
		    <view class="te-tps">
		      <view>{{detail.currentRank}} </view>
		      <view>当前排名</view>
		    </view>
		   
		    <view class="te-tps" v-if="detail.differVote">
		      <view>{{detail.differVote}}</view>
		      <view>距上一名差</view>
		    </view>
			<view class="ru_coupon" v-if="type == 2">大赛入场券</view>
		  </view>
		  <view class="te-top topte">
		    <view class="total-p">
			  <view>{{detail.totalVote}}</view>
		      <view>总票数</view>
		     
		    </view>
		    <view class="total-p">
			  <view>{{detail.totalRefuel}}</view>
		      <view>助力数</view>
		      
		    </view>
		    <view class="total-p">
			  <view>{{detail.totalForward}}</view>
		      <view>转发数</view>
		     
		    </view>
		  </view>
		  <view class="thes">
		    <!-- <view class="thes-center" bindtap='help'>
		      <image src="../../images/choosefoot.png"></image>
		    </view> -->
		    <view class="la">
		     
				  <view >
					   <u-button openType='share'  color='#e8565c'>帮他拉票 </u-button>
				  </view>
			 
		      <view style="text-align: right;" @click='tapvote'>投他一票</view>
		    </view>
		  </view>
		</view>
		
		<view class="footer getmain">
		  <!-- <view class="vote">有人豪气为TA助力<text style="font-size:28rpx">(仅显示最新5条记录)</text></view> -->
		   
		  <view class="kong" v-if='voteList.length == 0' >
			  <u-empty
			  marginTop='20'
			  text='还没有人给你助力哦'
			          mode="data"
			  >
			  </u-empty>
		  </view>
		  <view v-else>
		    <view class='gifts' v-for='(item,index) in voteList' :key='index'>
		      <view class='rankhead'>
		        <image :src='item.userImgUrl'></image>
		      </view>
		      <view class='rankm'>
		        <view class='giftm'>{{item.userName}}</view>
		        <view class='pnum'>赠送</view>
		       
		          <image class='gitf' :src='item.giftImgUrl'></image>
		        
		        <view class='pnum'>+{{item.voteNumber}}票</view>
		      </view>
		      <view class='ranktime'>{{item.time}}</view>
		    </view>
		  
		   
		  </view>
		</view>
		<view style="height:100rpx"></view>
		<view class="searc getmain">
		 <!-- <navigator open-type="reLaunch" url='/pages/home/home/home'>
		    首页
		   
		  </navigator> -->
		  <navigator open-type="navigate" :url='eventurl'>
		    查看赛事
		    <!-- <view class="xie"></view> -->
		  </navigator>
		  <view class="maincolor" @click='tapApply' v-if='eventDetail.competitionStatus == 1'>我要报名</view>
		  <view class="jiez" v-else>报名截止</view>
		</view>
		
		
	</view>
</template>

<script>
	import {getCompetitionPlayerDetailApi,getCompetititonDetailApi,
	getvoteListApi,getCompetitionPlayerentranceCouponsApi} from '@/config/api.js'
	export default {
		data() {
			return {
				 detail:[],
				 playerId:'',
				 sId:'',
				 eventurl:'',
				 eventDetail:{},
				 voteList:[],
				 competitionId:'',
				 type:''
			};
		},
		onLoad(option) {
			  this.playerId = option.playerId
			  this.sId = option.sId || ''
			  console.log(this.sId)
			  if(option.type == 2){
				  this.type = 2
				  this.competitionId= option.competitionId
				  this.getCouponDetail()
				  return
			  }
			  
			  this.getDetail()
		},
		methods:{
			tapApply(){
			   uni.navigateTo({
			   	url:'/pages/apply/palyer-apply/palyer-apply?competitionId=' + this.detail.competitionId
			   })	
			},
			tapvote(){
			   uni.$u.route({
				   url:'/pages/home/home/playerVote',
				   params:{
					   playerId:this.playerId,
					   competitionId:this.detail.competitionId,
					   institutionId:this.detail.institutionId
				   }
			   })	
			},
			getVoteList(){
				getvoteListApi({
					playerId:this.playerId
				}).then(res=>{
					 console.log(res)
					 this.voteList = res.records.map(i=>{
						let t = i.createDate.substring(5)
						 i.time = t.replace(/T/g,' ')
						 return i
					 })
				})
			},
			getDetail(){
				getCompetitionPlayerDetailApi({
					beforePlayerId:this.sId,
					playerId:this.playerId
				}).then(res=>{
					this.getVoteList()
					res.img = res.playerImgUrl.split(',')
					 this.detail = res
					 uni.setNavigationBarTitle({
					 	title:res.playerName
					 })
					 getCompetititonDetailApi({
						 id:res.competitionId
					 }).then(res=>{
						 this.eventDetail = res
					 })
					 this.eventurl ='/pages/home/home/homeDetail?id=' + res.competitionId
				})
			},
			getCouponDetail(){
				getCompetitionPlayerentranceCouponsApi({
					id:this.competitionId
				}).then(res=>{
					this.playerId = res.id
					this.getVoteList()
					res.img = res.playerImgUrl.split(',')
					 this.detail = res
					 uni.setNavigationBarTitle({
					 	title:res.playerName
					 })
					 getCompetititonDetailApi({
						 id:res.competitionId
					 }).then(res=>{
						 this.eventDetail = res
					 })
					 this.eventurl ='/pages/home/home/homeDetail?id=' + res.competitionId
				})
				
			}
		},
		onShareAppMessage() {
			console.log('/pages/home/home/player-detail?playerId=' +this.playerId + '&sId=' +this.sId)
			
			return{
				title:`你的好友正在${this.eventDetail.competitionName}，快来助他一臂之力吧`,
				path:'/pages/home/home/player-detail?playerId=' +this.playerId + '&sId=' +this.sId
			}
		},
		
	}
</script>

<style lang="scss" scoped>
 /* pages/e_player/e_player.wxss */
 page{
   background: #f2f2f2;
 }
 .active{
   color: #F861AA;
 }
 .nwrap{
 	margin-top: 20rpx;
 	margin-bottom: 20rpx;
 	width: calc(100% - 40rpx);
 	margin-left: 20rpx;
 	background-color: white;
 	padding: 20rpx;
 	box-sizing: border-box;
 	
 }
 .fenl{
   display: flex;
   justify-content: space-between;
   padding: 20rpx;
   box-sizing: border-box;
   color: #ccc;
   
 }
 .ntops{
 	font-size: 32rpx;
 	font-weight: bold;
 	margin-bottom: 20rpx;
 }

 /deep/.u-button{
	 	 height: 44px !important;
	 	 font-size: 16px !important;
	 }
 
 .jilu{
   width: 100%;
   font-size: 28rpx;
   text-align: center;
   margin: 30rpx 0 ;
 }
 .contents{
 	font-size: 24rpx;
 	letter-spacing: 1rpx;
 	line-height: 40rpx;
 }
 .tmenu>view{
   display: inline-block;
   margin-left: 20rpx;
   
 }
 .tmenu>view:nth-child(2){
    margin-left: 40rpx;
 }
 .te{	
 	width: 100%;
 	padding: 20rpx;
 	box-sizing: border-box;
 	text-align: center;
 }
 .te-photo{
 	width: 100%;
 	overflow: scroll;
 	white-space: nowrap;
 	text-align: center;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20rpx;
 }
 
 .te-pho{
 	display: inline-block;
 	width: 100%;
 	height: 392rpx;
 }
 .te-pho image{
   width: 100%;
   height: 100%;	
 }

 

 .searc{
 	position: fixed;
   bottom: 0;
   left: 0;
 	width: 100%;
 	height: 98rpx;
 	background: #FFFFFF;
 	font-size: 30rpx;
 	color: #000000;
 	line-height: 98rpx;
 
 }
 .searc>navigator{
	 width: 50%;
	  display: inline-block;
	  text-align: center;
 }
 .searc>view{
   	 width: 50%;
     display: inline-block;
     text-align: center;
 }
 .subm{
 	color: #F861AA;
 }
 .jiez{
   color: #ccc;
 }
 .xie{
 	display: inline-block;
     width: 2rpx;
     height: 48rpx;
     background: #f2f2f2;
     /* float: right; */
     /* top: 20px; */
     margin-top: 26rpx;
 }
 .te-t{
 	width: calc(100% - 40rpx);
 	margin-left: 20rpx;
 	background: #FFFFFF;
 	border-radius: 8rpx;
 	margin-bottom: 70rpx;
 }
 .te-top{
 	padding:30rpx 0;
 	box-sizing: border-box;
 	border-bottom: 1px solid #F2F2F2;
 	
 	text-align: center;
	.ru_coupon{
		width: 150rpx;
		height: 50rpx;
		position: absolute;
		border: 1px solid $btnBg-color;
		color: $btnBg-color;
		rotate: (30deg);
		line-height: 50rpx;
		top: 40rpx;
	}
 }
 .te-top>view{
 	width: 31.3%;
 	text-align: center;
 	display: inline-block;
 }
 .te-tps view:nth-child(1){
 	color: #FF7655;
 	font-size: 46rpx;
 	display: block;
 }.te-tps view:nth-child(2){
 	color: #9F9F9F;
 }
 .topte{
 	border: 0;
 }
 /* .total-p{
 	font-size: ;
 } */
 .total-p view:nth-child(2){
 	display: block;
 	color: #9F9F9F;
 }
 .total-p view:nth-child(1){
 	font-size: 40rpx;
 }
 
 .tops{
   position: relative;
   top: -108rpx;
   left: 0rpx;
 }
 .top{
   padding: 20rpx 20rpx;
   box-sizing: border-box;
   background: #fff;
   
   width: calc(100% - 40rpx);
   margin-left: 20rpx;
  
   border-radius: 20rpx;
 }
 .toptile{
   font-size: 20rpx;
 }
 .three{
 	width: calc(100% - 60px);
 	margin-left: 30px;
 	font-size: 17px;
 }
 .threeze{
  width: calc(100% - 60px);
 	margin-left: 30px;
 	font-size: 17px; 
 }
 .threeze>view{
 	width: 48%;
 	display: inline-block;
 	/* float: left; */
 	text-align: center;
 	margin-top: 5px;
 }
 .three>view{
 	width: 33.33%;
 	display: inline-block;
 	/* float: left; */
 	text-align: center;
 	margin-top: 5px;
 }
 .four{
 	margin-top: 6px;
 	color: #999999;
 	font-size: 10px;
 }
 .fours{
 	color: #000000;
 	font-size: 10px;
 	margin-top: 6px;
 }
 .numb{
 	color: #F861AA;
 }
 .piao{
 	margin-top: 10px;
   font-size: 24rpx;
 }
 .piao>view{
 	width: 25%;
 	float: left;
 	text-align: center;
 	color: #BCBCBC;
 }
 .num{
 	color: #000000;
 	font-size: 17px;
 	font-weight: 700;
 	margin-top: 5px;
 	display: block;
 }
 .nav{
   padding: 20rpx 20rpx;
   box-sizing: border-box;
   background: #fff;
   margin-top: 20rpx;
   font-size: 24rpx;
 }
 .rankhead image{
   width: 80rpx;
   height: 80rpx;
   border-radius: 50%;
   overflow: hidden;
 }
 .rankhead{
   display: inline-block;
   vertical-align: middle;
   margin-right: 20rpx;
 }
 .rankm{
   flex: 1;
   display: flex;
   align-items: center;
 }
 .ranksum{
   float: right;
   margin-top: 16rpx;
   width: 130rpx;
   height: 60rpx;
   color: #fff;
   text-align: center;
   line-height: 60rpx;
   background: #F861AA;
   font-size: 28rpx;
 }
 .figer{
   margin-top: 20rpx;
   width: 100%;
   height: 400rpx;
 }
 .figer image{
   width: 100%;
   height: 100%;
 }
 .vote{
 	line-height: 80rpx;
   font-size: 24rpx;
 }
 .votez{
  overflow:hidden;
 overflow-x:auto;
 height:75rpx;
 -webkit-overflow-scrolling: touch;
 }
 .votehead{	
     height: 70rpx;
     box-shadow: 0 0 2px #a7a7a7;
     margin-right: 18rpx;
     width: 70rpx;
     overflow-x: hidden;
     float: left;
     border-radius: 70rpx;
     margin-bottom: 4rpx;
     -webkit-overflow-scrolling: touch;
 }
 .votehead image{
 	width: 70rpx;
 	height: 70rpx;
 }
 .kong{
 	margin-top: 80rpx;
 	padding-bottom: 80rpx;
 	box-sizing: border-box;
 	text-align: center;
   font-size: 30rpx;
 }
 .footer{
 	margin-top: 20rpx;
 	background: #FFFFFF;
 	padding: 0 20rpx;
 	box-sizing: border-box;
 }
 .heads{
 	line-height: 120rpx;
 	
 }
 .orders{
 	float: right;
 	margin-right: 20rpx;
 	color: #A7A7A7;
 	font-size: 24rpx;
 }
 .sendtu image{
 	width: 32rpx;
 	height: 40rpx;
 	
 }
 .giftm{
   display: inline-block;
   max-width: 160rpx;
   overflow: hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
   vertical-align: top;
 }
 .gifts{
   display: flex;
   align-items: center;
   font-size: 28rpx;
   padding-bottom: 20rpx;
   box-sizing: border-box;
 }
 .pnum{
   display: inline-block;
   margin-top: -1rpx;
   margin-left: 6rpx;
   vertical-align: top;
 }
 .ranktime{
  
   color: #A7A7A7;
   font-size: 24rpx;
 }
 .gitf{
   width: 50rpx;
   height: 64rpx;
   margin:0 10rpx;
 }
 .gitf image{
   width: 100%;
   height: 100%;
 }
 .thes{
 	position: relative;
 	bottom: -40rpx;
 	left: 0;
 	height: 96rpx;
 	background: #e8565c;
    width: 100%;
  
   font-size: 28rpx;	
   border-bottom-left-radius: 8rpx;
   border-bottom-right-radius: 8rpx;
 }
 .la{
 	width: calc(100% - 80rpx);
 	
 	display: flex;
 	justify-content: space-between;
 	line-height: 96rpx;
 	color: #FFFFFF;
	>view{
		font-size: 32rpx;
		font-weight: bold;
		width: 50%;
	}
 }








</style>
